<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>a integrate case for char SDK</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="../../../common/reset.css" type="text/css" rel="stylesheet"/>
		<link href="../../../common/common.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/tabmenu/tabmenu.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/selectbutton/selectbutton.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/dropdownlist/dropdownlist.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/slider/slider.css" type="text/css" rel="stylesheet"/>
		<link href="../../../widgets/autocomplete/autocomplete.css" type="text/css" rel="stylesheet"/>
		<link href="../../../widgets/chart/chart.css" type="text/css" rel="stylesheet"/>		
		<link href="../../../theme/default/style.css" type="text/css" rel="stylesheet"/>  
		<style>
		.sdk-chart-out-container{width:800px;}
		.sdk-chart-panel{height:120px;display:none;background:#fff;border:1px solid #999;border-top:none;}
		.sdk-chart-section{float:left;width:100px;margin: 6px 5px 0;}
		.sdk-chart-section .qs-ui-ipt{height:14px;}
		.sdk-chart-type,.sdk-chart-fundamental,.sdk-chart-indicators{float:left;height:86px;overflow-x: hidden;overflow-y: scroll;}
		.sdk-chart-section-type {width:130px;}
		.sdk-chart-section-axis {width:80px;}
		.sdk-chart-section-fundamental{width:130px;}
		.sdk-chart-section-indicator {width:240px;}
		.sdk-chart-section-drawings {width:200px;}
		.sdk-chart-section-compare{width:200px;}
		.sdk-chart-range{padding:9px;white-space:nowrap;}
		.sdk-chart-custom-date-container,.sdk-chart-freq-container, .sdk-chart-zoom-container{display:inline-block;vertical-align:top;}
		.sdk-chart-freq-container {vertical-align:top;width:80px;}
		.sdk-chart-freq .rtq-ddl{margin:0;}		
		.sdk-chart-section-input-panel {display:none;}		
		.sdk-chart-section-input-panel .rtc-win{left:0;top:0;}
		.sdk-chart-section-input-panel {width:220px;}
		.sdk-chart-section-input-panel .qs-ui-ipt{width:60px;}
		.sdk-chart-section-input-panel .para-list,.sdk-chart-section-input-panel .action-row{float:left;}
		.sdk-chart-section-input-panel .row-left{float:left;  margin: 1px 5px;width: 130px;}
		.sdk-chart-section-input-panel .row{margin:1px 0;}
		.sdk-chart-section-input-panel .action-row {margin-top:4px;}
		.sdk-chart-section-input-panel .qs-ui-btn {margin-left:2px;}

		.sdk-chart-zoom-container a,
		.sdk-chart-section .qs-ui-btn{
			border:1px solid;
			display:inline-block;
			font-size:10px;
			height:18px;
			line-height:18px;
			min-width:29px;
			padding:0 4px;
			text-align:center;
			text-decoration:none;
			vertical-align:top;
			background:url(//im.mstar.com/im/b_slice_off.gif);
			border-color:#e1e1e1 #b9b9b9 #b9b9b9 #e1e1e1;
			color:#000;
		}
		.sdk-chart-zoom-container a.on{
			background:url(//im.mstar.com/im/b_slice_on.gif);border-color:#888888 #B9B9B9 #B9B9B9 #666666;}
		.sdk-chart-custom-date-container span{color:#ccc;}
		.sdk-chart-custom-date-container .qs-ui-ipt{height:13px;}		
		.sdk-chart-saved-info {width:800px;height:100px;border: 1px solid #CCCCCC;word-break: break-all;}
		.sdk-chart-event-info{width:800px;height:200px;border: 1px solid #CCCCCC;}
		.sdk-chart-save-btn,.sdk-chart-event-btn {height:30px; margin:2px}
		.sdk-chart-save-btn .qs-ui-btn{height:20px}
		</style>
    </head>
    <body style="overflow: auto; padding: 0; margin: 0">
		
		
		
     <div class="sdk-chart-out-container">
	 <div class="sdk-chart-main-box"><input id = "sdk-chart-main-autobox" class="qs-ui-ipt"><a href="javascript:void(0)" value="auto" class="qs-ui-btn go">GO</a></div>
	 <div class="sdk-chart-tool">
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-display">
		 <div class="sdk-chart-section">
			 <div class="text"><h4>Chart Cursor</h4></div>
			 <div class="sdk-chart-cursor">
			 </div>
		 </div>
		 <div class="sdk-chart-section sdk-chart-section-type">
			 <div class="text"><h4>Chart Type</h4></div>
			 <div class="sdk-chart-type">
			 </div>
		 </div>
		 <div class="sdk-chart-section sdk-chart-section-axis">
			 <div class="text"><h4>Y-axis</h4></div>
			 <div class="sdk-chart-axis">
			 </div>
		 </div>
		 <div class="sdk-chart-section">
			 <div class="text"><h4>Vertical Scale</h4></div>
			 <div class="sdk-chart-scale">
			 </div>
		 </div>
		 <div class="sdk-chart-section">
			 <div class="text"><h4>Selection Mode</h4></div>
			 <div class="sdk-chart-selection">
			 </div>
		 </div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-compare">
		<div class="sdk-chart-section sdk-chart-section-compare">
			<div class="text"><h4>Compare</h4></div>
			<div class="sdk-chart-compare">
				<input id = "sdk-chart-autobox" class="qs-ui-ipt"><a href="javascript:void(0)" value="auto" class="qs-ui-btn go">Add</a>
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-indicators">
		<div class="sdk-chart-section">
			<div class="text"><h4>Events</h4></div>
			<div class="sdk-chart-events">
			</div>
		</div>
		<div class="sdk-chart-section sdk-chart-section-indicator">
			<div class="text"><h4>Indicators</h4></div>
			<div class="sdk-chart-indicators">
			</div>
		</div>
		<div class="sdk-chart-section sdk-chart-section-input-panel">
			<div class="text">
				<h4></h4>
			</div>
			<div class="para-list"></div>
			<div class="action-row">
				<a  href="javascript:void(0);" class = "qs-ui-btn add" value="draw">Add</a>
				<a href="javascript:void(0);" class = "qs-ui-btn canel" value="cancel">Canel</a>
				<a href="javascript:void(0);" class = "qs-ui-btn remove" value="remove">Remove</a>
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-fundamental">
		<div class="sdk-chart-section sdk-chart-section-fundamental">
			<div class="text"><h4>Fundamental</h4></div>
			<div class="sdk-chart-fundamental">
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-drawings">
		<div class="sdk-chart-section sdk-chart-section-drawings">
			<div class="text"><h4>Drawings</h4></div>
			<div class="sdk-chart-drawings">
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-range">
		<div class="sdk-chart-custom-date-container">
		<input type="text" class="qs-ui-ipt" style="width: 80px;">
		<span>-</span>
		<input type="text" class="qs-ui-ipt" style="width: 80px;">
		</div>
		<div class="sdk-chart-freq-container">
			<div class="sdk-chart-freq" style="width: 76px; z-index: 90;">
			</div>
		</div>
		<div class="sdk-chart-zoom-container">
			<a href="javascript:void(0);" value="1" class="on">1 D</a><a href="javascript:void(0);" value="2">5 D</a><a href="javascript:void(0);" value="3">1 Mth</a><a href="javascript:void(0);" value="4">3 Mth</a><a href="javascript:void(0);" value="5">YTD</a><a href="javascript:void(0);" value="6">1 Yr</a><a href="javascript:void(0);" value="7">3 Yr</a><a href="javascript:void(0);" value="8">5 Yr</a><a href="javascript:void(0);" value="9">10 Yr</a><a href="javascript:void(0);" value="10">Max</a><a href="javascript:void(0);" value="export">Export data to Excel</a>
		</div>
	 </div>
		<div class="sdk-chart-container" id = "sdk-chart"></div>
	</div>
	<div class="sdk-chart-info">
	<div class="sdk-chart-saved-info"></div>
	<div class="sdk-chart-save-btn"><a href="javascript:void(0)" value="save" class="qs-ui-btn">Save status of chart</a> </div>
	<div class="sdk-chart-event-info">
	</div>
	<div class="sdk-chart-event-btn">On Stage Changed <a href="javascript:void(0)" value="clear" class="qs-ui-btn">Clear</a></div>
	</div>
	
	<script src="../../../lib/jquery.js" type="text/javascript"></script>
	<script src="../../../lib/jquery.mousewheel.js" type="text/javascript"></script>
	<script src="../../../lib/jquery.json.min.js" type="text/javascript"></script>
	<script src="../../../core/common.js" type="text/javascript" ></script>
	<script src="../../../core/permissionChecker.js" type="text/javascript" ></script>
	<script src="../../../core/tickers.js" type="text/javascript" ></script>
	<script src="../../../core/subscriber.js" type="text/javascript"></script>
	<script src="../../../core/dataHandler.js" type="text/javascript"></script>
	<script src="../../../core/pull.js" type="text/javascript"></script>
	<script src="../../../core/push.js" type="text/javascript"></script>
	<script src="../../../core/SDKDataManager.js" type="text/javascript"></script>
	<!--[if lte IE 8]><script type="text/javascript" src="../../../excanvas.min.js"></script><![endif]-->
	<script src="../../../ui/util/util.js" type="text/javascript"></script>
	<script src="../../../ui/tabmenu/tabmenu.js" type="text/javascript"></script>
	<script src="../../../ui/selectbutton/selectbutton.js" type="text/javascript"></script>
	<script src="../../../ui/dropdownlist/dropdownlist.js" type="text/javascript"></script>
	<script src="../../../ui/slider/slider.js" type="text/javascript"></script>
	<script src="../../../widgets/autocomplete/autocomplete.js" type="text/javascript"></script>
	<script src="../../../language/en_us/qs_chart_en_us.js" type="text/javascript"></script>
	<script src="../../../formatter/qs_formatter_en_us.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartUI.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartDraw.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartUtil.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/indicatorCalculation.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartDataManager.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/baseChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/stockChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/fundChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/forexChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/mstar.flot.js" type="text/javascript"></script>
	 <script>
		var chartWidget = new QSAPI.Widget.Chart.Stock("MSFT", "USA", "en_us");		
	    $(".sdk-chart-panel-display").show();
		var toolEl = $(".sdk-chart-tool")[0];  // initilaze the tab menus.
		var toolTabMenu = new Util.TabMenu(toolEl,[{
			txt:"Display",
			id:"display",
			closable:false
		},{
			txt:"Compare",
			id:"compare",
			closable:false
		},{
			txt:"Indicators",
			id:"indicators",
			closable:false
		},{
			txt:"Fundamental",
			id:"fundamental",
			closable:false
		},{
			txt:"Drawings",
			id:"drawings",
			closable:false
		}],{
			onActive: function(tab){
				$(".sdk-chart-panel").hide();
				$(".sdk-chart-panel-"+tab.id).show();
					
			}
        },{ width:80,
           isExcuteCallbackAtInit:false,
		   closeAction:'hide'
        });
		
		var cursorEl = $(".sdk-chart-cursor");
		var cursorData = chartWidget.cursorTypeListData;  // get the cursorData from chart object.
		cursorData[1].checked = true; //defaut to checked the "crosshair"
		var cursorRatioGroup = new Util.ButtonGroup(cursorEl,cursorData,{
		   onClick:function(v){  // change the cursor type.
				chartWidget.setCursorType(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		var typeEl = $(".sdk-chart-type");
		var typeData = chartWidget.chartTypeListData;
		typeData[0].checked = true;////defaut to checked the "montain"
		var typeRatioGroup = new Util.ButtonGroup(typeEl,typeData,{
		   onClick:function(v){   // change the chart type;
			   chartWidget.setChartType(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		
		var axisEl = $(".sdk-chart-axis");
		var axisData = chartWidget.yaxisAlignListData;
		axisData[1].checked = true;
		var axisRatioGroup = new Util.ButtonGroup(axisEl,axisData,{
		   onClick:function(v){
			   chartWidget.setYaxisAlign(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		var scaleEl = $(".sdk-chart-scale");
		var scalData = chartWidget.scaleTypeListData;
		scalData[0].checked = true;
		var scaleRatioGroup = new Util.ButtonGroup(scaleEl,scalData,{
		   onClick:function(v){
			   chartWidget.switchScaleType(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		
		var selectionEl = $(".sdk-chart-selection");
		var selectionData = chartWidget.selectionModeListData;
		selectionData[0].checked = true;
		selectionData.splice(2,1);//remove the "reset".
		var selectionRatioGroup = new Util.ButtonGroup(selectionEl,selectionData,{
		   onClick:function(v){
				chartWidget.setSelectionMode(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		
		var eventsEl = $(".sdk-chart-events");
		var eventsData = chartWidget.eventsData;
		var eventsRatioGroup = new Util.ButtonGroup(eventsEl,eventsData,{
		   onClick:function(v,item){
			  chartWidget.switchEvents(v,item.isSelected);
		   }
		},{
			type: 'checkbox',
			vertical: true
		});
		
		var indicatorInputPanelEl = $(".sdk-chart-section-input-panel");
		var showIndicatorParaPanel = function(value){   // display the panel for input of indicator.
			var indicatorList = chartWidget.indicatorUI;
			indicatorInputPanelEl.find(".text H4").html(indicatorList[value].title);
			indicatorInputPanelEl.attr("value",value);
			var str = "",idr = indicatorList[value];
			for (var i = 0; i < idr.parameter.length; i++) {
				str += '<div class="row"><div class="row-left"><span>' + idr.parameter[i] + '</span></div><input type="text" class="qs-ui-ipt"  value="' + (typeof(idr.defaultValue[i]) == "undefined" ? "" : idr.defaultValue[i]) + '" ></div>';
			}
			indicatorInputPanelEl.find(".para-list").html(str);
			indicatorInputPanelEl.show();
		};
		indicatorInputPanelEl.find(".action-row a").unbind("click").bind("click",function(e){  // bind the events
			var v = $(e.target).attr("value");
			var indicatorKey = indicatorInputPanelEl.attr("value");
			if(v=="draw"){ // add a indicator.
				var ipts = indicatorInputPanelEl.find(".para-list input"), args = [];
				args[0] = indicatorKey;
				for (var i = 0; i < ipts.length; i++) {
					args.push(ipts[i].value);
				}
				chartWidget.addIndicators.apply(chartWidget, args);
			}else if(v=="remove"){ // remove a indicator
				if (indicatorKey != null) {
					chartWidget.removeIndicators(indicatorKey);
					indicatorInputPanelEl.hide();
				}
			}else if(v=="cancel"){  // cancel the indicator.
				indicatorKey = null;
			}
			indicatorInputPanelEl.hide();
		});
		
		var indicatorsEl = $(".sdk-chart-indicators");
		var indicatorList = chartWidget.indicatorPanelData;
		var indicatorData = [];
		for(var i=1;i<indicatorList.length;i++){  // remove the indicatorList[0]. it is repeat with others.
			for(var j=0;j<indicatorList[i].length;j++){
				indicatorData.push(indicatorList[i][j]);
			}
		}
		var indicatorsRatioGroup = new Util.ButtonGroup(indicatorsEl,indicatorData,{
		   onClick:function(value,item){
				var d =chartWidget.indicatorUI;
				if(d[value]&&d[value].parameter&&d[value].parameter.length){// need input parameters.
					if(item.isSelected)item.inverse();
					else item.select();
					showIndicatorParaPanel(value);
				}else{
					if(!item.isSelected){  // remove the indicator
						chartWidget.removeIndicators(value);
					}else{
						chartWidget.addIndicators(value);
						//if(value=="Volume"){
						//	elm.indicatorsPanel.find("a[value='VPlus']").removeClass("qs-urlchart-item-on");
						//}else if(value=="VPlus"){
						//	elm.indicatorsPanel.find("a[value='Volume']").removeClass("qs-urlchart-item-on");
						//}
					}
					
				}
		   }
		},{
			type: 'checkbox',
			inverse:true,
			vertical: true
		});
		
		var fundamentalEl = $(".sdk-chart-fundamental");
		var fundamentalList = chartWidget.fundamentalPanelData;
		var fundamentalData=[];
		for(var i =0;i<fundamentalList.length;i++){
			for(var j=0;j<fundamentalList[i].length;j++){
				fundamentalData.push(fundamentalList[i][j]);
			}
		}
		var fundamentalRatioGroup = new Util.ButtonGroup(fundamentalEl,fundamentalData,{
		   onClick:function(v,item){
			 if(item.isSelected) chartWidget.addValuations(v);
			 else chartWidget.removeValuations(v);
		   }
		},{
			type: 'checkbox',
			inverse:true,
			vertical: true
		});
		
		var drawingsEl = $(".sdk-chart-drawings");
		var drawingData = chartWidget.drawingData;
		    drawingData.splice(3,1); // remove the "Note";
		var drawingsRatioGroup = new Util.ButtonGroup(drawingsEl,drawingData,{
		   onClick:function(v,item){
				if(item.isSelected)chartWidget.beginDrawing(v);  // drawing is ready.
				else chartWidget.cancelDrawing(v);
		   }
		},{
			type: 'radio',
			inverse:true,
			vertical: true
		});
		var customDateB = new RTQ_chartCustomDataBox($(".sdk-chart-custom-date-container"),{ // set the container of custom date inputs boxes
			startDate:null,
			endDate:null,
			width:80,
			splitLabel:"-",
			callback:function(s,e){
				self.chartComponent.changeDatePeriod(s,e);
			},
			bindEvent:true
		});
		var freqEl = $(".sdk-chart-freq");
		var frqData = chartWidget.frequencyListData;
		var ddlFrequency = new Util.DropDownList(freqEl[0], function(k, v){
              chartWidget.setFrequency(v);     //self.chartComponent.frequencySelected(k, v);
		},frqData, {
			triggerByClick: false,
			width: 76,
			disable: false,
			actionAtInit: false
		});
		$(".sdk-chart-save-btn .qs-ui-btn").bind("click",function(e){  // save the status of chart.
			var saveInfo = chartWidget.saveConfig();
			$(".sdk-chart-saved-info").html($.toJSON(saveInfo));
		});
		$(".sdk-chart-event-btn .qs-ui-btn").bind("click",function(e){  // save the status of chart.
			$(".sdk-chart-event-info").html("");
		});
		 // initilaze the data manager
		QSAPI.init("DISN");
		 // initilaze the chart 
        var prefix = "//qsstage.morningstar.com/"
        QSAPI.DataManager.Chart.dataUrls.intraday = prefix+"quote.jsp?";
        QSAPI.DataManager.Chart.dataUrls.historical = prefix+"getStockHistoricalData.jsp?";
        QSAPI.DataManager.Chart.dataUrls.fundamental = prefix+"getFundamentalData.jsp?";
        QSAPI.DataManager.Chart.dataUrls.minutelyIntraday = prefix+"getMinutelyIntradayData.jsp?";
		QSAPI.DataManager.Chart.dataUrls.fundHistorical=prefix+"getFundChartData.jsp?";
		QSAPI.DataManager.Chart.dataUrls.exportDataToExcel=prefix+"exportChartDataToExcel.jsp?";
        QSAPI.DataManager.Chart.dataUrls.forex = prefix+"getForexHistoricalData.jsp?";
		QSAPI.DataManager.Chart.crossDomain = true;
		var acbWidget;
        //chartWidget.id = "sdk-chart";
		//after callbacks
		QSAPI.Authentication.login("511F1BFFABACF2797D53014B7B7EF29F502E7015781E8D93A04989A70197E422B9AC0FE2E59882CDC9713E118EEA680F7F0E859C73FBD6BEF64C7DD04490EF1A","62D2A0641B01FBF65FA127365CDC0DC427458A67D958FC979718FF067CCD1A8D8D4E839255D60957C1A502D25C724A1D65F6EEE07636A0AA84E8F51C8D1831EE",{   // login in to QS web server to get the data permission
			onSuccess:function(result){
			   // initilaze the autocomplete object.
				acbWidget = QSAPI.Widget.AutoComplete($(document.body),{},{},null);
				acbWidget.subscribe("sdk-chart-autobox",{  // autocomplete box in compare section
				}, {onClick:function(ticker){
					chartWidget.addCompairTickers([ticker]);
				}});
				acbWidget.subscribe("sdk-chart-main-autobox",{ // autocomplete box for switch subject ticker.
				}, {onClick:function(ticker){
					chartWidget.acceptTicker(ticker);
				}});
				
				$(".sdk-chart-main-box .go").bind("click",function(e){
					acbWidget.trigger("sdk-chart-main-autobox");
				})
				$(".sdk-chart-compare .go").bind("click",function(e){
					acbWidget.trigger("sdk-chart-autobox");
				})
				QSAPI.DataManager.Chart.dataSourceType = "pull"
				QSAPI.DataManager.connectToPull("http://qsstage.morningstar.com/pullservice/pull/getPullQuote.jsp",5000,{
					onSuccess:function(result){
						chartWidget.init("sdk-chart",{width:870,height:360});
					}
				}) // push or pull.
			},
			onFailure:function(result){
			}
		});
		
		
		//chartWidget._elements.indicatorWinElm.appendTo(".sdk-chart-section-input-panel");
		// bind interfaces to event of UI.
		
		$(".sdk-chart-zoom-container a").unbind("click").bind("click",function(e){  // range buttons
			var t = $(e.target), range = t.attr("value");
				//scfg.zoomRange = range;
				if(range=="export"){  // export data to excel.
					chartWidget.exportDataToExcel();
				}else{
					chartWidget.changeRange(range);
					$(".sdk-chart-zoom-container a").removeClass("on");
					$(".sdk-chart-zoom-container").find("a[value=" + range + "]").addClass("on");
				}	
		})
		
		// after callbacks they are trigged after finishing some opaerate.
		var stateMap= {
			1:"Subject ticker changed",
			2:"Added compare tickers",
			3:"Removed compare tickers",
			4:"Added one indicator",
			5:"Removed one indicator",
			6:"Added one fundmental chart",
			7:"Removed one fundmental chart",
			8:"Events has changed",
			9:"Date range changed",
			10:"Chart Type changed",
			11:"Chart Cursor changed",
			12:"Postion of y-axis changed",
			13:"Vertical scale changed",
			14:"Add a drawing",
			15:"Frequency changed"
		}
		chartWidget.onStateChange = function(stateCode,e){
			var t = $(".sdk-chart-event-info").html();
			t+= stateMap[stateCode]+"<br>"
			$(".sdk-chart-event-info").html(t);
		
		}
		chartWidget.afterDrawEnd = function(drawType){  // end of
			drawingsRatioGroup.btns[drawType].inverse();
		};
		chartWidget.afterAddIndicators = function(data){
			if(indicatorsRatioGroup.btns&&indicatorsRatioGroup.btns[data.indicatorName]){
				indicatorsRatioGroup.btns[data.indicatorName].select();
			}
		}
		chartWidget.afterRemoveIndicators = function(data){
			if(indicatorsRatioGroup.btns&&indicatorsRatioGroup.btns[data.indicatorName]&&indicatorsRatioGroup.btns[data.indicatorName].isSelected){
				indicatorsRatioGroup.btns[data.indicatorName].inverse();
			}
		}
		chartWidget.afterRemoveVolumeChart = function(){ // remove volume chart.
			if(indicatorsRatioGroup.btns){  // unselect the volume, volume plus and smvv indicators.
				if(indicatorsRatioGroup.btns["Volume"])indicatorsRatioGroup.btns["Volume"].inverse();
				if(indicatorsRatioGroup.btns["VPlus"])indicatorsRatioGroup.btns["VPlus"].inverse();
				if(indicatorsRatioGroup.btns["SMVV"])indicatorsRatioGroup.btns["SMVV"].inverse();
			}
		}
		chartWidget.afterRemoveValuationCallback = function(data){
			if(fundamentalRatioGroup.btns&&fundamentalRatioGroup.btns[data.name]&&fundamentalRatioGroup.btns[data.name].isSelected){
				fundamentalRatioGroup.btns[data.name].inverse();
			}
        }
		chartWidget.datePeriodChanged = function(data){ // when the date range changed.
			if(data.zoomRange==11){  // after customize date.
				$(".sdk-chart-zoom-container a").removeClass("on");
			}
		}
		chartWidget.selectedDatesChanged = function(s,e){
			if(customDateB)customDateB.setDate(s,e);
		}
		chartWidget.afterFrequencyDataChanged = function(data){ // frequency list has changed.
			ddlFrequency.rebindData(data);
		};
		chartWidget.afterFrequencyChanged = function(frequnecy){
			ddlFrequency.setTextValue("",frequnecy);
		};
	 </script>
            
    </body>
</html>
